<template>
	<view class="order-box">
		<view class="bg-white">
			<view class="section">
				<!-- payment and amount begin -->
				<list-cell :hover="false" padding="50rpx 30rpx">
					<view class="w-100 flex-fill  d-flex flex-column align-items-center">
						<view>
							<view class="d-flex align-items-center" style="font-weight: bold; font-size: 40rpx;">预约挂号成功
							</view>
							<view class="d-flex align-items-center" style="font-size:30rpx;">
								预约挂号成功，请在预约当天提前15分钟前往医院挂号科室排队就诊</view>
						</view>
					</view>

				</list-cell>

			</view>

			<view class="section">
				<!-- payment and amount begin -->
				<list-cell :hover="false" padding="50rpx 30rpx">

					<view class=" flex-fill  d-flex flex-column align-items-center">
						<view>
							<view class="d-flex align-items-center" style="font-weight: bold; font-size: 30rpx;">就诊凭条
							</view>
							<view style="width: 90%;">
								<tkiBarcode cid="code128" :loadMake="false" :opations="opations" :onval="true"
									format="code128" :val="val" ref="code128" />

							</view>
						</view>
					</view>
				</list-cell>


			</view>

			<view class="section">
				<!-- order info begin -->
				<list-cell :hover="false" padding="50rpx 30rpx">
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>费用类型</view>
							<view class="font-weight-bold">预约挂号</view>
						</view>
						<view class="pay-cell">
							<view>就诊科室</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi[0].departmentname }}</view>
						</view>
						<view class="pay-cell">
							<view>医生名称</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi[0].doctorname }}</view>
						</view>
						<view class="pay-cell">
							<view>就诊日期</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi[0].date}}</view>
						</view>
						<view class="pay-cell">
							<view>就诊时段</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi[0].shiduan}}</view>
						</view>
						<view class="pay-cell">
							<view>就诊人</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi[0].name}}</view>
						</view>
						<view class="pay-cell">
							<view>就诊卡号</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi[0].card}}</view>
						</view>
					</view>
				</list-cell>

			</view>

		</view>
		<view>
			<button class="btn" @tap="btn()">取消挂号</button>
		</view>

	</view>

	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	import mm from '../../api/member.js'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			listCell,
			tkiBarcode,
			tkiBarcode2: tkiBarcode
		},
		data() {
			return {
				jiuzhenxinxi:{},
				bar: ['code128'],
				val: "",
				opations: {
					// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
					width: 5, //设置条之间的宽度
					height: 120, //高度
					displayValue: true, //是否在条形码下方显示文字
					// text: "370830200010302910",//覆盖显示的文本
					textAlign: "left", //设置文本的水平对齐方式
					textPosition: "bottom", //设置文本的垂直位置
					textMargin: 0, //设置条形码和文本之间的间距
					// fontSize: 24,//设置文本的大小
					// fontColor: "#0000ef",//设置文本的颜色
					// lineColor: "#0000ef",//设置条形码的颜色
					background: "#FFFFFF", //设置条形码的背景色
					margin: 0, //设置条形码周围的空白边距
					// marginTop: 10,//设置条形码周围的上边距
					// marginBottom: 20,//设置条形码周围的下边距
					// marginLeft: 30,//设置条形码周围的左边距
					// marginRight: 40,//设置条形码周围的右边距
					id:''
				}

			}
		},
		computed: {
			...mapState(['order'])
		},
		onLoad(openin) {
			this.id=openin.id;
			this.getjilu();

			setTimeout(() => {
				for (let index = 0; index < this.bar.length; index++) {
					setTimeout(() => {
						console.log(index)
						this.$refs[this.bar[index]]._makeCode()
					}, 1000 * index);
				}
			}, 1000);
		},
		methods: {
			orders() {
				if (!this.$store.getters.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/orders/orders'
				})
			},


			getjilu() {
				var data = {
					info: JSON.stringify({
						"id": this.id
					})
				};
				this.$api.getjili(data).then(res => {
					
					console.log('查到的数据:' + JSON.stringify(res));
					for(var i=0;i<res.length;i++){
						res[i].date=res[i].date.substring(0,res[i].date.indexOf(" ")); 
					}
					this.jiuzhenxinxi=res;
					this.val=res[0].card;
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});
				
				})
			},
			btn() {
				var data = {
					info: JSON.stringify({
						"id": this.id
					})
				};
				var that = this;
				uni.showModal({
					title: '取消号源提示',
					content: '取消后您将失去本号源，是否确认取消？',
					success: function(res) {
						if (res.confirm) {
							that.$api.deleteguahao2(data).then(ress => {

								if (ress) {
									uni.showToast({
										title: '取消成功',
										duration: 2000,

									});
									uni.switchTab({
										url: '/pages/index/index'
									})
								

								}


							}).catch(err => {
								// 登录失败
								uni.hideLoading()
								uni.showToast({
									title: '查找失败',
									icon: 'none'
								});

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});




			},



		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		min-height: 100%;
		background-color: $bg-color;
	}

	/* #endif */
	.order-box {
		padding: 20rpx;
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
	}

	.drinks-img {
		width: 260rpx;
		height: 260rpx;
	}

	.tips {
		margin: 60rpx 0 80rpx;
		line-height: 48rpx;
	}

	.btn {
		margin: 20rpx auto;
		font-size: 32rpx;
		width: 95%;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #3ECEB6;
		color: #FFFFFF;
		height: 80rpx;
	}

	.drink-btn {
		width: 320rpx;
		border-radius: 50rem !important;
		margin-bottom: 40rpx;
		font-size: $font-size-base;
		line-height: 3.0;
	}

	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}

	.section {
		position: relative;

		&::before {
			@include arch;
			left: -15rpx;
		}

		&::after {
			@include arch;
			right: -15rpx;
		}
	}

	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.sort-num {
		font-size: 64rpx;
		font-weight: bold;
		color: $text-color-base;
		line-height: 2;
	}

	.steps__img-column {
		display: flex;
		margin: 30rpx 0;

		.steps__img-column-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.steps__text-column {
		display: flex;
		margin-bottom: 40rpx;

		.steps__text-column-item {
			flex: 1;
			display: inline-flex;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-base;
			color: $text-color-assist;

			&.active {
				color: $text-color-base;
				font-weight: bold;

				.steps__column-item-line {
					background-color: $text-color-base;
				}
			}

			.steps__column-item-line {
				flex: 1;
				height: 2rpx;
				background-color: #919293;
				transform: scaleY(0.5);
			}

			.steps__text-column-item-text {
				margin: 0 8px;
			}
		}
	}
</style>
